<template>
	<view class="main">
		<view class="studies"><image src="http://www.szzn.group/uploads/20221107/07cdc83eca5d8ec61200d5145c1b04da.png" mode=""></image></view>
		<view class="ld">
			<view class="left">
				<scroll-view :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="clickToId" :style="{ height: windowHeight }">
					<view v-for="(item, index) in GardenList" :key="index">
						<view :class="currentNum == index ? 'leftactive' : ''" class="left-title" :id="'to' + index" @click="setId(item.id, index)">{{ item.cate_name }}</view>
					</view>
				</scroll-view>
			</view>
			<view class="right">
				<view class="experience">
					<view @click="selectExperience(i.id)" :class="experience == i.id ? 'experience-active' : ''" class="" v-for="i in titleList" :key="i">
						<image :src="i.pic" mode=""></image>
						<view class="">{{ i.cate_name }}</view>
					</view>
				</view>
				<scroll-view :scroll-into-view="clickId" @scroll="scroll" :scroll-with-animation="true" :scroll-y="true" :style="{ height: windowHeight }">
					<view v-for="(item, index) in activeList" :key="index" v-if="activeList.length != 0">
						<view class="title,right_title" :id="'po' + index">
							<view class="list" @click="gardeHorticultureDetail(item.id)">
								<view class="pic"><image :src="item.image" mode=""></image></view>
								<view class="righttitle">
									<view class="">{{ item.title }}</view>
									<view class="">
										<view class="">
											<view class="time">预约时间:{{ (item.signup_start_time * 1000) | dateFormat }}</view>
											<view class="address">地址:{{ item.province + item.city + item.district + item.detail }}</view>
										</view>
										<view class="">预约</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="zanwu" v-if="activeList.length == 0">
						<view class="fenge"></view>
						<view class="wu">暂无数据</view>
						<view class="fenge"></view>
					</view>
				</scroll-view>
				
			</view>
		</view>
	</view>
</template>

<script>
import moment from 'moment';
import { homeGardenList, homeGardenIdList, getActiveId } from '@/api/api.js';
export default {
	data() {
		return {
			experience: 0, //体验序号
			GardenList: [],
			activeList: [],
			windowHeight: '0px',
			clickId: '',
			clickToId: '',
			currentNum: 0,
			topList: [],
			isLeftClick: false,
			titleList: []
		};
	},
	onLoad() {
		uni.showLoading({})
		let _that = this;
		uni.getSystemInfo({
			success: function(res) {
				_that.windowHeight = res.windowHeight - 124 - 69 + 'px';
			}
		});
		this.getNodesInfo();
		this.homeGardenList();
	},
	// 分享
	onShareAppMessage() {
		return {
			title: '优栽园',
			path: 'page_home/agriculturestudies/agriculturestudies'
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '优栽园',
			path: 'page_home/agriculturestudies/agriculturestudies'
		};
	},
	methods: {
		// 获取分类
		homeGardenList() {
			let data = `group_id=${5}`;
			homeGardenList(data).then(res => {
				if (res.data.code == '200') {
					uni.hideLoading()
					this.GardenList = res.data.data;
					this.GardenList.forEach((item, index) => {
						if (index == 0) {
							this.titleList = item.child;
							this.experience = item.child[0].id;
							let data = `page=${1}&limit=${15}&cate_id=${this.experience}&group_id=${5}`;
							getActiveId(data).then(res => {});
						}
					});
					this.init();
				} else {
					uni.hideLoading()
				}
			});
		},
		moment() {},
		// 初始化数据
		init() {
			this.setId(this.GardenList[0].id, 0);
		},
		// 左侧点击
		setId(id, index1) {
			this.clickId = 'po' + index1;
			this.isLeftClick = true;
			this.currentNum = index1;
			this.GardenList.forEach((item, index) => {
				if (index == index1) {
					this.titleList = item.child;
					this.experience = item.child[index].id;
				}
			});
			uni.showLoading({})
			let data = `page=${1}&limit=${15}&cate_id=${this.experience}&group_id=${5}`;
			getActiveId(data).then(res => {
				if(res.data.code == '200'){
					uni.hideLoading()
					this.activeList = res.data.data;
				}else {
					uni.hideLoading()
				}
			});
		},
		scroll(e) {
			if (this.isLeftClick) {
				this.isLeftClick = false;
				return;
			}
			let scrollTop = e.target.scrollTop;
			for (let i = 0; i < this.topList.length; i++) {
				let h1 = this.topList[i];
				let h2 = this.topList[i + 1];
				if (scrollTop >= h1 && scrollTop < h2) {
					this.currentNum = i;
					this.clickToId = 'to' + i;
				}
			}
		},
		getNodesInfo() {
			const query = uni.createSelectorQuery().in(this);
			query
				.selectAll('.right_title')
				.boundingClientRect()
				.exec(res => {
					let nodes = res[0];
					let rel = [];
					nodes.map(item => {
						rel.push(item.top);
					});
					this.topList = rel;
				});
		},
		// 选择体验
		selectExperience(id) {
			this.experience = id;
			let data = `page=${1}&limit=${15}&cate_id=${this.experience}&group_id=${5}`;
			uni.showLoading({})
			getActiveId(data).then(res => {
				if(res.data.code == '200'){
					uni.hideLoading()
					this.activeList = res.data.data;
				}else {
					uni.hideLoading()
				}
			});
		},
		// 果蔬园艺详情
		gardeHorticultureDetail(id) {
			uni.navigateTo({
				url: '/page_home/agricultureactive/agricultureactive?id=' + id
			});
		}
	}
};
</script>

<style lang="less">
.main {
	background-color: #f0f0f0;
}

.studies {
	padding: 20rpx;

	image {
		width: 100%;
		height: 200rpx;
	}
}

.leftactive {
	border-left: 4px solid #ec6932;
	color: #ec6932 !important;
}

.ld {
	display: flex;

	.left {
		flex: 0.7;
		text-align: center;
		width: 180rpx;

		.title {
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			color: #000000;
		}

		.left-title {
			padding: 30rpx 20rpx;
			border-bottom: 1px solid #eee;
			background-color: #f7f7f7;
			color: #a5a5a5;
			font-size: 28rpx;
		}
	}

	.right {
		flex: 2;

		.title {
			padding: 20upx;
		}

		.item {
			padding-left: 20upx;
			display: inline-block;
			height: 50upx;
		}

		image {
			width: 100%;
			height: 300rpx;
			// border-radius: 20rpx;
		}

		.righttitle {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 20rpx 20rpx;

			> view:nth-child(1) {
				font-weight: 700;
				padding: 0 0 15rpx 0;
				font-size: 28rpx;
			}

			> view:nth-child(2) {
				display: flex;
				justify-content: space-between;
				align-items: center;

				> view:nth-child(1) {
					color: #999;
					font-size: 28rpx;
				}

				> view:nth-child(2) {
					color: #fff;
					background-color: #289958;
					font-size: 28rpx;
					padding: 6rpx 30rpx;
					border-radius: 6rpx;
					font-size: 24rpx;
				}
			}
		}

		.experience {
			padding: 0 20rpx;
			display: flex;
			font-size: 22rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}

			> view:nth-child(2) {
				padding: 0 20rpx;
			}
		}

		.experience-active {
			color: #ed8b62;
		}

		.list {
			position: relative;
			border-radius: 15rpx;
			background-color: #fff;
		}

		.black {
			position: absolute;
			top: 60%;
			width: 100%;
			background-color: #fff;
			height: 35rpx;
		}
	}
}
.address {
	font-size: 24rpx;
	width: 350rpx;
}
.pic {
	image {
		height: 100%;
		border-radius: 15rpx 15rpx 0 0;
	}
}
.time {
	font-size: 26rpx;
}
.zanwu {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d5d5d5;
	font-size: 24rpx;
	margin-top: 30rpx;
	.fenge {
		height: 2rpx;
		background-color: #d5d5d5;
		width: 60rpx;
	}
	.wu {
		margin: 0 13rpx;
	}
}
</style>
